<template>
  <el-dialog
    title="新增材料"
    width="800px"
    custom-class="gov-application-materials-add"
    :append-to-body="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <dynamicForm :formItemValue="formData" :formItemData="formItemData" ref="dynamicForm" />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import dynamicForm from '../../dynamicForm';
  import formItemData from './formItemData';
  export default {
    components: { dynamicForm },
    props: {
      visible: {
        type: Boolean
      },
      businessTache: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data() {
      return { formItemData, formData: { tacheTimeValue: '', tacheTimeUnit: '', businessTacheId: '' } };
    },
    watch: {
      visible: {
        handler(val) {
          if (!val) {
            this.$refs['dynamicForm'].resetField();
          }
        }
      },
      businessTache: {
        handler(val) {
          if (val && val.length > 0) {
            const businessTache = this.formItemData[2];
            businessTache.tags = val;
            this.formItemData.splice(2, 1, businessTache);
          }
        },
        immediate: true
      }
    },
    computed: {},
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      },
      submit() {
        const obj = this.$refs['dynamicForm'].getFormData();
        if (obj.valid) {
          this.$emit('addSuccessHandle', obj.data);
          this.handleClose();
        }
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .gov-application-materials-add {
    .el-dialog__body {
      height: 400px;
      overflow-y: auto;
    }
  }
</style>
